<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Anx Reader</title>
<style>
  html {
    height: 100vh;
    overflow: hidden;
  }

  body {
    user-select: none;
    margin: 0 !important;
    height: 100vh;  
  }


  #footnote-dialog {
    /*
    padding: var(safe-area-inset-top) var(safe-area-inset-right) var(safe-area-inset-bottom) var(safe-area-inset-left);
    */
    position: fixed;
    width: 80vw;
    height: 80vh;
    max-width: 400px;
    max-height: 200px;
    min-width: 300px;
    min-height: 200px;
    border-radius: 15px;
    border: 1px solid grey;
    user-select: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    outline: none;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
  }

  #footnote-dialog main {
    overflow: auto;
    width: 100%;
    height: 100%;
  }
</style>
<div id="footnote-dialog">
  <main></main>
</div>
<script>
  (function () {
    const ua = navigator.userAgent || '';
    const platform = navigator.platform || '';
    console.log('AnxUA', ua);

    const isAppleDevice = /iPad|iPhone|iPod/.test(ua)
      || (/Mac/.test(platform) && navigator.maxTouchPoints > 1)
      || /Mac OS X/.test(ua);

    const chromeMatch = ua.match(/Chrome\/(\d+)/);
    const chromeVersion = chromeMatch ? parseInt(chromeMatch[1], 10) : NaN;
    const shouldUseModernBundle = isAppleDevice || (!Number.isNaN(chromeVersion) && chromeVersion >= 100);

    const loadScript = (src, options = {}) => new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = src;
      if (options.type) script.type = options.type;
      if (options.async !== undefined) script.async = options.async;
      if (options.defer !== undefined) script.defer = options.defer;
      script.onload = () => resolve();
      script.onerror = (err) => {
        console.error('Failed to load script', src, err);
        reject(err);
      };
      document.head.appendChild(script);
    });

    (async () => {
      if (shouldUseModernBundle) {
        await loadScript('./src/vendor/pdfjs/pdf.js', { async: false, defer: false });
        await loadScript('./src/book.js', { type: 'module' });
        return;
      }

      await loadScript('./dist/bundle.js', { type: 'module' });
      await loadScript('./dist/pdf-legacy.js', { async: false, defer: false });
    })();
  })();
</script>
